<template>
    <div class="login">
        <h3>上传图片</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="pic">
                <el-upload
                    class="avatar-uploader"
                    action="/api/pic/uploadPic"
                    ref="upload"
                    :show-file-list="false"
                    :on-success="successfun"
                    :on-error="errorexern"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.pic" :src="ruleForm.pic" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      ruleForm: {
        username: "",
        pic: "",
        path: ""
      },
      fileList: [],
      rules: {
        username: [
          { required: true, message: "请输入您的名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //选项卡切换
    handleClick(tab, event) {},
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let _that = this;
          let date = new Date();
          date = date.getTime();
          let params = {};
          params["username"] = _that.ruleForm.username;
          params["pic"] = _that.ruleForm.pic;
          params["path"] = _that.ruleForm.path;
          params["create_time"] = date;
          this.$ajax.post("/api/pic/addPic", params).then(function(res) {
            if (res.data.code == 200) {
              _that.$message.success(res.data.obj);
              _that.ruleForm.username = "";
            } else {
              _that.$message.warning(res.data.obj);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    successfun(response, file, fileList) {
      //上传服务器成功回调
      var _that = this;
      if (response.code == "200") {
        this.ruleForm.pic =
          "http://localhost:8083/static/upload/" + response.obj;
        this.ruleForm.path = response.path;
        this.$message.success("上传成功！");
      } else {
        this.$message.error("文件解析失败！");
        this.ruleForm.pic = "";
        this.ruleForm.path = "";
      }
    },
    errorexern(response, file, fileList) {
      //上传服务器失败回调
      this.$message.warning("上传失败！");
      this.ruleForm.pic = "";
      this.ruleForm.path = "";
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.login {
  width: 400px;
  margin: 0 auto;
}
</style>
